<template>
    <div class="box" :style="{height: height + 'px'}">
        <aitem v-if="article" v-for="msg in article" :key="msg.url" :msg="msg"/>
        <div class="load" v-show="load">{{tip}}</div>
    </div>
</template>
<script>
import aitem from "../public/Aitem";
import { Get, Post, Port } from "../../../server/ajax"
export default {
  data() {
    return {
      article: [],
      height: document.body.clientHeight - parseFloat(window.getComputedStyle(document.documentElement)["fontSize"]) * 1.05,
      load: false,
      page: 1,
      tip: '加载中...'
    };
  },
  components: {
    aitem
  },
  methods: {
    infor() {
      this.load = true
      if(this.tip == '暂无更多'){
        return
      }
      Post(`${Port}/mobile/cms/subjects`, {
        page: this.page,
        page_size: 4,
        cid: 107
      }, function(data) {
        this.article = this.article.concat(data)
        this.page++
        this.load = false
        if(data.length < 4){
          this.tip = '暂无更多'
        }
      }.bind(this))
    }
  },
  mounted() {
    this.infor()
    this.$el.addEventListener("scroll", function(){
        if(this.$el.scrollTop == 0){
            this.$parent.$parent.tState = 1
            this.$parent.$parent.updata()
        }
        if(this.$el.scrollTop + this.height + 1.05 * parseFloat(window.getComputedStyle(document.documentElement)["fontSize"]) > this.$el.lastChild.offsetTop + this.$el.lastChild.clientHeight){
            this.infor()
        }
    }.bind(this))
  }
};
</script>
<style scoped>
.box{
    overflow: auto;
}
.load{
    text-align: center;
    height: 0.8rem;
    line-height: 0.8rem;
    font-size: 0.28rem;
    color: #666;
}
</style>